<template>
	<view class="container">
		<button :disabled="startBtnDisabled" @click="startRecord">开始录音</button>
		<button :disabled="endBtnDisabled" @click="stopRecord">结束录音</button>
		<button @click="playRecord">播放录音</button>
		<button @click="uploadRecord">上传录音</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startBtnDisabled: false,
				endBtnDisabled: true,
				// 录音管理器
				recordManager: null,
				// 音频播放器
				innerAudioContext: null,
				// 录音文件的路径
				tempRecordPath: null
			};
		},
		methods: {
			// 开始录音
			startRecord() {
				this.recordManager.start({
					format: 'mp3',
					duration: 300000
				})
			},
			// 结束录音
			stopRecord(){
				this.recordManager.stop()
			},
			playRecord(){
				this.innerAudioContext.src = this.tempRecordPath;
				this.innerAudioContext.play();
			},
			uploadRecord(){
				uni.uploadFile({
					url: 'http://localhost:8080/interview/answer/testUploadRecord',
					filePath: this.tempRecordPath,
					name: 'file',
					formData: {
						questionId:10
					},
					success: (res) => {
						console.log('res',res)
					}
				})
			}
		},
		onLoad() {
			this.recordManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();
			// 开始的时候
			this.recordManager.onStart(() =>{
				this.startBtnDisabled = true
				this.endBtnDisabled = false
				console.log('开始录音。。。')
			});
			// 结束的时候
			this.recordManager.onStop((res) => {
				this.endBtnDisabled = true
				this.startBtnDisabled = false
				console.log('录音完成。。。')
				console.log('res.tempFilePath',res.tempFilePath)
				this.tempRecordPath = res.tempFilePath;
			});
		}
	}
</script>

<style lang="scss">
.container{
	// display: flex;
	// flex-direction: column;
	// align-items: center;
	padding: 30rpx;
	button{
		margin: 30rpx;
	}
}
</style>
